<template>
  <!--工具栏-->
  <fragment>
    <div class="sea-toolbar-button" style="float:right;" @click="open" title="使用文档">
      <i class="fa fa-fw fa-book" style="color: #FFFFFF"></i>
      <span></span>
    </div>

    <el-drawer title="" :visible.sync="expand" @click.stop class="sea-scroll-bar">
      <h5>操作文档</h5>
      <div>
        <span v-for="(item, idx) in reverse" :key="idx" class="text-box inline-block" @click="openDocPage(item)">
          <a>{{ item.label }}</a>
        </span>
      </div>

      <h5>运行环境</h5>
      <div>
        <span v-for="(item, idx) in doc" :key="idx" class="text-box inline-block" @click="openDocPage(item)">
          <a>{{ item.label }}</a>
        </span>
      </div>

      <h5>系统日志</h5>
      <div>
        <span v-for="(item, idx) in log" :key="idx" class="text-box inline-block" @click="openLogPage(item)">
          <a>{{ item.label }}</a>
        </span>
      </div>

      <h5>通用设置</h5>
      <div>
        <label v-for="(item, idx) in settings" :key="idx" class="text-box inline-block"
               @click="doSetting($event, item)">
          <span>{{ item.label }}</span>
          <el-checkbox v-model="item.value"></el-checkbox>
        </label>
      </div>

      <h5>参数配置</h5>
      <el-row>
        <el-col :span="24" class="sea-card">
          <label>
            日志文件目录
            <sea-tips>
              <p>此功能用于配置系统日志目录，方便查看系统执行日志。</p>
            </sea-tips>
            <el-input value="C://log"></el-input>
          </label>
        </el-col>
        <el-col :span="24" class="sea-card">
          <label>
            Excel容量上限
            <sea-tips>
              <p>设置Excel文件数量上限，当文件数量达到上限时，系统将提醒用户清除文件。</p>
            </sea-tips>
            <el-input value="50"></el-input>
          </label>
        </el-col>
      </el-row>


      <h5>消息列表</h5>
      <el-row>
        <el-col class="text-box with-border">
          <a>【消息1】你有一则新消息</a>
          <p style="text-align: right"><i class="fa fa-clock-o"></i>2023-03-03</p>
        </el-col>
        <el-col class="text-box with-border">
          <a>【消息2】你有一则新消息</a>
          <p style="text-align: right"><i class="fa fa-clock-o"></i>2023-03-03</p>
        </el-col>
        <el-col class="text-box with-border">
          <a>【消息3】你有一则新消息</a>
          <p style="text-align: right"><i class="fa fa-clock-o"></i>2023-03-03</p>
        </el-col>
      </el-row>
    </el-drawer>
  </fragment>
</template>

<script>
/**
 * 消息窗
 */
export default {
    name: "message",
    data() {
        return {
            // 是否展开消息栏
            expand: false
            , doc: [
                {label: 'icon', value: '/doc/icons'}
                , {label: 'mybatis', value: '/doc/ibatis'}
                , {label: 'environment', value: '/doc/props'}
            ]
            , reverse: [
                {label: 'open-api', value: '/doc/open-api'}
                , {label: '系统介绍', value: '/doc/blog'}
                , {label: '接口文档', value: '/doc/api-mapping'}
            ]
            , log: [
                {label: 'slf4j', value: '/log/slf4j'}
                , {label: '访问日志', value: '/log/access'}
                , {label: '登录日志', value: '/log/login'}
            ]
            , settings: [
                {label: '禁用任务', value: false, name: ''}
                , {label: '禁用消息', value: false, name: ''}
                , {label: '禁用文档', value: false, name: ''}
            ]
        }
    },
    methods: {
        openDocPage: function (item) {
            this.$router.push(item.value);
            this.expand = false;
        }
        , openLogPage: function (item) {
            this.$router.push(item.value);
            this.expand = false;
        }
        , open: function () {
            this.expand = !this.expand;
        }
        , doSetting: function (e, item) {
            e.preventDefault();
            console.log(item);
        }
    }
}
</script>

<style scoped>
</style>
